﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyMapsAPI.aspx.cs" Inherits="GoogleMapAPI.MyMapsAPI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title> 
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAov6vECi6SOcE8LKJCJ1frhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSr6tS4TzBfSNq699APfrsxFFUBzA"></script>
    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <style type="text/css">
    .canvas
    {
        width:800px;
        height:600px;   
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>    
        <textarea class="content" rows="40" cols="50"></textarea>
        <div class="canvas"></div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            var src =  ("http://ditu.google.com/maps/ms?ie=UTF8&hl=zh-CN&brcurrent=3,0x31508e64e5c642c1:0x951daa7c349f366f,0%3B5,0,0&msa=0&msid=212800177725253189507.0004a07859593181e6f23&ll=38.08269,98.481445&spn=13.995455,33.815918&z=6&output=kml");
            var url = "MyMapsGet.aspx?src=" + src;
            jQuery.get(url, "", function (data) {
                $(".content").text($(data).text());
            });

        })
        var MAPS_SCOPE = 'https://maps.google.com/maps/feeds/';
        //google.load('gdata', '2.x', { packages: ['maps'] });
        //google.setOnLoadCallback(init);
        function init() {
            var myMapToolsKit = new MyMapToolsKit({
                mapCanvas: ".canvas",
                mapOptions: { 
                    zoom: 4,
                    center: new google.maps.LatLng(39.90555, 116.39147),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: true
                },
                myMapUserId: "212800177725253189507",
                myMapId: "0004a07859593181e6f23",
                myMapServiceName: "com.google.mapsdatasamples.simple_simple",
                cookie: "g314-scope-0=scope=https%3A%2F%2Fmaps.google.com%2Fmaps%2Ffeeds%2F&token=2%2FpTC1UlR_QYibYGFHmwnceKmXKiq_QyPY9kPFQkqunow"
            });
            myMapToolsKit.initialize();
        }
        function setCookie(cookie) {
            var exdate = new Date()
            exdate.setDate(exdate.getDate() + 20)
            document.cookie = cookie + ";expires=" + exdate.toString();// "g314-scope-0=scope=https%3A%2F%2Fmaps.google.com%2Fmaps%2Ffeeds%2F&token=2%2FpTC1UlR_QYibYGFHmwnceKmXKiq_QyPY9kPFQkqunow;expires=" + exdate.toString();
        }
        function loadXML(xmlText) {
            var xmlDoc;
            if (window.ActiveXObject) {
                xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
                xmlDoc.async = false;
                xmlDoc.loadXML(xmlText);
            }
            else if (DOMParser) {
                parser = new DOMParser();
                xmlDoc = parser.parseFromString(xmlText, "text/xml");
            }
            else {
                return null;
            }
            return xmlDoc;
        }

        function MyMapToolsKit(options) {
            this._options = {
                mapCanvas: $(options.mapCanvas),
                mapOptions:options.mapOptions,
                myMapUserId: options.myMapUserId,
                myMapId: options.myMapId,
                myMapServiceName:options.myMapServiceName,
                cookie:options.cookie
            };
            this._map = null;
        }
        MyMapToolsKit.prototype.initialize = function () { 
            setCookie(this._options.cookie);  
            this._map = new google.maps.Map(this._options.mapCanvas.get(0), this._options.mapOptions);
            var authSubToken = google.accounts.user.checkLogin(MAPS_SCOPE);
            if (authSubToken) {
                // show map
                this._mapsService = new google.gdata.maps.MapsService(this._options.myMapServiceName);
                this._mapsSrc = "https://maps.google.com/maps/feeds/features/" + this._options.myMapUserId + "/" + this._options.myMapId + "/full";
                this._mapsService.getMapEntry(this._mapsSrc, this.handleMapEntry, function (e) {
                    this.handleGDataError(e);
                });
            }
            else {
                google.accounts.user.login(MAPS_SCOPE);
                //show my maps directly
            }
        }
        MyMapToolsKit.prototype.handleGDataError = function (e) {            
        }
        MyMapToolsKit.prototype.handleMapEntry = function (mapFeedRoot) {
            var featureEntries = mapFeedRoot.feed.entry;
            for (var i = 0; i < featureEntries.length; i++) {
                var kml = featureEntries[i].content.$t;
                var xmlDoc = $(loadXML(kml));
                var icon = xmlDoc.find('href').text();
                var coordinate = xmlDoc.find('coordinates').text();
                var allCoors = coordinate.split(',');
                var position = new google.maps.LatLng(allCoors[1], allCoors[0]);
                var maker = new google.maps.Marker({ icon: icon, map: this._map, position: position });
                if (i == 0) {
                    this._map.setCenter(position);
                }
            }              
        }
    </script>
    </form>
</body>
</html>
